<template>
  <div>
    <h3>宠物知识列表</h3>
    <div class="box">
      <el-scrollbar
          style="height: 100%"
          wrap-class="scrollbar-wrapper">
        <div
            class="infinite-list"
            v-infinite-scroll="load"
            infinite-scroll-delay="1000">
          <div v-for="article in articleList" class="infinite-list-item article-li" style="height: 120px">
            <el-row style="height: 100%">

              <el-col :span="6" style="height: 100%">
                <!--                  <div class="grid-content">-->
                <!--                    <div class="demo-image__preview">-->
                <!--                      <el-image-->
                <!--                          style="width: 100%; height: 100%"-->
                <!--                          :src="imgPath"-->
                <!--                          :preview-src-list="srcList">-->
                <!--                      </el-image>-->
                <img src="src/assets/dog1.jpeg" width="100%">
                <!--                      3213213-->
                <!--                    </div>-->
                <!--                  </div>-->
              </el-col>

              <el-col :span="16" class="el-right">
                <el-link href="https://element.eleme.io" target="_blank" style="font-size: larger;font-weight: bolder">
                  {{ article.title }}
                </el-link>
                <p style="color: #909399">{{ article.introduce }}</p>
                <span class="mr-20">{{ article.updateTime }}</span>
                <i class="el-icon-coin" style="color: #909399">&nbsp;
                  <span>{{ article.views }}</span>
                </i>


              </el-col>
            </el-row>
          </div>
        </div>
      </el-scrollbar>


    </div>
  </div>
</template>

<script>
export default {
  name: "PetArticleList",
  data() {
    return {
      params: {
        pageNum: 1,
        pageSize: 3,
        title: '',
      },
      total: 0,
      pages: 0,
      prePage: 0,
      nextPage: 0,

      articleList: [],
    }
  },
  methods: {
    initArticle() {
      let url = '/petArticle/list';
      this.$axios({
        url: url,
        method: 'get',
        params: this.params,
      }).then(res => {
        if (res.data.code === 200) {
          this.articleList = res.data.data.list;
          this.total = res.data.data.total;
          this.nextPage = res.data.data.nextPage;
          this.prePage = res.data.data.prePage;
          this.pages = res.data.data.pages;
        } else {
          this.$message({
            type: 'success',
            message: res.data.msg,
            duration: 1500,
          });
        }
      })
    },
    load() {

      let oldList = this.articleList;
      // this.$message.info('正在加载下一页……');

      this.params.pageSize += 1;
      this.initArticle();
      if (oldList === this.articleList) {
        this.loading = false
      }

      // console.log(this.articleList)
      // console.log(22222)
    }

  },
  created() {
    // this.initArticle()
  },
}
</script>


<style scoped>

li {
  /*height: 400px;*/
}

.box {
  height: 500px;
}

img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.article-li {
  padding: 10px;
}

.el-right {
  padding-left: 20px;
}

.mr-20 {
  margin-right: 20px;
}

/*.el-row {*/
/*  margin-bottom: 20px;*/
/*  &:last-child {*/
/*     margin-bottom: 0;*/
/*   }*/
/*}*/
/*.el-col {*/
/*  border-radius: 4px;*/
/*}*/
/*.bg-purple-dark {*/
/*  background: #99a9bf;*/
/*}*/
/*.bg-purple {*/
/*  background: #d3dce6;*/
/*}*/
/*.bg-purple-light {*/
/*  background: #e5e9f2;*/
/*}*/
/*.grid-content {*/
/*  border-radius: 4px;*/
/*  min-height: 36px;*/
/*}*/
/*.row-bg {*/
/*  padding: 10px 0;*/
/*  background-color: #f9fafc;*/
/*}*/
</style>
